<template>
	<div class="login">
		<router-link to="/mobile/info"><</router-link>
		<form>
			<div class="header">
			<h2>Welcome  to  Locaticus</h2>
			</div>
			<div class="img">
				<img src="../../assets/img/mobile/屏幕截图 2024-01-07 215915.png"/>
			</div>
			<p><i class="el-icon-user"></i><input type="text" placeholder="Username" v-model="form.username"/></p>
			<p><i class="el-icon-unlock"></i><input type="tel" placeholder="Password" v-model="form.password"/></p>
			<p><button @click="login()">Sign in</button></p>
			<p><button @click="Register()">Register</button></p>
		</form>
	</div>
</template>

<script>
	import { mapActions } from 'vuex';
	export default {
		name:'MobileLogin',
		data() {
			return{
				form:{
					username:'',
					password:'',
				}
			}
		},
		methods:{
			...mapActions(['setUser']),
			login(){
				this.$postkv('/api/login',this.form).then((resp)=>{
					let token = resp.data.data.token;
					window.localStorage.setItem("token",token);
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					this.$get('/api/user/info').then((resp)=>{
											this.setUser({
												name:resp.data.data.name,
												role:resp.data.data.role,
												account:resp.data.data.account,
												img:resp.data.data.img,
											})
						if(resp.data.data.role == 'usr'){
												this.$router.push({
													path:'/mobile/info',
												})
											}
											if(resp.data.data.role =='adm'){
												this.$router.push({
													path:'/admin/home',
													query:{name:resp.data.data.name}
												})
											}
					})
					
				})
			},
			Register(){
				this.$router.push({
					path:'/mobile/mobileregister',
				})
			}
		}
	}
</script>

<style scoped>
	a{
		color: white;
		height: 3rem;
		display: flex;
		align-items: center;
		font-size: 1.5rem;
		margin-left: 1.25rem;
	}
	.login{
		width: 100%;
		height: 100%;
		background:#313541;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.login .header{
		color: gainsboro;
		width: 100%;
		height: 8rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login .img{
		width: 100%;
		height: 12rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login .img img{
		width: 40%;
		height: 100%;
	}
	.login form{
		width: 100%;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.login form p{
		width: 80%;
		height: 3rem;
		background-color: #464855;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 1.5rem auto;
	}
	.login form i{
		background-color: #464855;
		color: gainsboro;
		font-size: 2.1rem;
	}
	.login form input{
		color: white;
		height: 2rem;
		width: 80%;
		background-color: #464855;
		border: none;
		text-indent: 0.9375rem;
		outline: none;
	}
	.login form button{
		color: gainsboro;
		font-size: 1.25rem;
		width: 100%;
		height: 100%;
		background-color: #0cd389;
		border: none;
		border-radius: 0.3125rem;
	}
</style>